<template>
  <div class='className'>
    <el-card class='anoCard'>
      <div slot='header'>
        <span>订单管理</span>
      </div>
      <div class='searchDiv'>
        <el-input
          type='text'
          placeholder='请输入订单号'
          class='width1'
          v-model='form.orderSn'></el-input>
        <!--        <el-select-->
        <!--          v-model='sch_status'-->
        <!--          clearable-->
        <!--          class='width1'-->
        <!--          placeholde='请选择状态'-->
        <!--        >-->
        <!--          <el-option-->
        <!--            v-for='item in options'-->
        <!--            :label='item.label'-->
        <!--            :value='item.value'-->
        <!--            :key='item.value'-->
        <!--          ></el-option>-->
        <!--        </el-select>-->
        <el-date-picker
          class='width1'
          v-model='form.createTime'
          type='date'
          placeholder='选择提交时间'
          value-format='yyyy-MM-dd'></el-date-picker>
        <el-button type='primary' icon='el-icon-search' @click='searchTab'>搜索
        </el-button>
      </div>

      <!--      {{tableData}}-->
      <el-table :data='tableData' border :fit='true'>
        <el-table-column prop='id' label='序号' width='60'></el-table-column>
        <el-table-column prop='memberId' label='订单号'></el-table-column>
        <el-table-column prop='couponId' label='下单时间'></el-table-column>
        <el-table-column prop='orderSn' label='订单编号' :width='tableWidth'></el-table-column>
        <el-table-column prop='createTime' label='提交时间' :width='tableWidth'></el-table-column>
        <el-table-column prop='memberUsername' label='用户账户'></el-table-column>
        <el-table-column prop='totalAmount' label='订单总金额'></el-table-column>
        <el-table-column prop='payAmount' label='应付金额'></el-table-column>
        <el-table-column prop='freightAmount' label='运费'></el-table-column>
        <el-table-column prop='promotionAmount' label='促销优惠金额'></el-table-column>
        <el-table-column prop='integrationAmount' label='积分抵扣金额'></el-table-column>
        <el-table-column prop='couponAmount' label='优惠券抵扣金额'></el-table-column>
        <el-table-column prop='discountAmount' label='管理后台调整订单使用的折扣额度'></el-table-column>
        <el-table-column prop='payType' label='支付方式'>
          <template slot-scope='scope'>
            <el-tag :type='scope.row.status | tagClass'>{{
                scope.row.status | payText
              }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop='sourceType' label='订单来源'></el-table-column>
        <el-table-column prop='orderType' label='订单类型'></el-table-column>
        <el-table-column prop='deliveryCompany' label='物流公司'></el-table-column>
        <el-table-column prop='deliverySn' label='物流单号' :width='tableWidth'></el-table-column>
        <el-table-column prop='autoConfirmDay' label='自动确认时间'></el-table-column>
        <el-table-column prop='integration' label='获得积分'></el-table-column>
        <el-table-column prop='growth' label='活动成长值'></el-table-column>
        <el-table-column prop='promotionInfo' label='活动信息' width='340'></el-table-column>
        <el-table-column prop='billType' label='发票类型'></el-table-column>
        <el-table-column prop='billHeader' label='发票抬头'></el-table-column>
        <el-table-column prop='billContent' label='发票内容'></el-table-column>
        <el-table-column prop='billReceiverPhone' label='收票人电话' :width='tableWidth'></el-table-column>
        <el-table-column prop='billReceiverEmail' label='收票人邮箱'></el-table-column>
        <el-table-column prop='receiverName' label='收货人姓名'></el-table-column>
        <el-table-column prop='receiverPhone' label='收货人电话' :width='tableWidth'></el-table-column>
        <el-table-column prop='receiverPostCode' label='收货人邮编'></el-table-column>
        <el-table-column label='地址'>
          <el-table-column
            prop='receiverProvince'
            label='省份'
            width='120'>
          </el-table-column>
          <el-table-column
            prop='receiverCity'
            label='城市'
            width='120'>
          </el-table-column>
          <el-table-column
            prop='receiverCity'
            label='区'
            width='120'>
          </el-table-column>
          <el-table-column
            prop='receiverRegion'
            label='详细地址'
            width='120'>
          </el-table-column>
        </el-table-column>
        <!--        <el-table-column prop='receiverProvince' label='省份/直辖市'></el-table-column>-->
        <!--        <el-table-column prop='receiverCity' label='城市'></el-table-column>-->
        <!--        <el-table-column prop='receiverRegion' label='区'></el-table-column>-->
        <!--        <el-table-column prop='receiverDetailAddress' label='详细地址'></el-table-column>-->
        <el-table-column prop='note' label='订单备注'></el-table-column>
        <el-table-column prop='confirmStatus' label='确认收货状态'>
          <template slot-scope='scope'>
            <el-tag :type='scope.row.status | tagClass'>{{
                scope.row.status | conText
              }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop='deleteStatus' label='删除状态'>
          <template slot-scope='scope'>
            <el-tag :type='scope.row.status | tagClass'>{{
                scope.row.status | delText
              }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop='useIntegration' label='下单使用积分'></el-table-column>
        <el-table-column prop='paymentTime' label='支付时间' :width='tableWidth'></el-table-column>
        <el-table-column prop='deliveryTime' label='发货时间' :width='tableWidth'></el-table-column>
        <el-table-column prop='receiveTime' label='确认收货时间' :width='tableWidth'></el-table-column>
        <el-table-column prop='commentTime' label='评价时间' :width='tableWidth'></el-table-column>
        <el-table-column prop='modifyTime' label='修改时间' :width='tableWidth'></el-table-column>
        <el-table-column prop='status' label='订单状态' width='90'>
          <template slot-scope='scope'>
            <el-tag :type='scope.row.status | tagClass'>{{
                scope.row.status | statusText
              }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label='操作' width='230'>
          <template slot-scope='scope'>
            <el-button
              type='primary'
              @click='editTable(scope.$index, scope.row)'
            >编辑
            </el-button
            >
            <el-button
              type='warning'
              @click='toConfirm(scope.row)'
              :disabled='scope.row.status === 1 ? false : true'
            >审核
            </el-button
            >
            <el-button
              type='success'
              @click='toSuccess(scope.row)'
              :disabled='scope.row.status === 2 ? false : true'
            >完成
            </el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        background
        layout='total, sizes, prev, pager, next'
        :page-sizes='pageSizes'
        :page-size='pageSize'
        :current-page='currentPage'
        :total='total'
        class='fyDiv'
        @size-change='handleSize'
        @current-change='handlePage'
      >
      </el-pagination>
    </el-card>
    <el-dialog title='订单修改' :visible.sync='diaIsShow' class='diaForm'>
      <el-form
        ref='diaForm'
        :model='formData'
        :rules='rules'
        label-width='140px'
      >
        <el-form-item label='订单号'>
          <el-input
            type='text'
            v-model='formData.order'
            :disabled='true'
          ></el-input>
        </el-form-item>
        <el-form-item label='订单时间' prop='time'>
          <el-date-picker
            v-model='formData.time'
            type='datetime'
            placeholder='选择日期时间'
            value-format='yyyy-MM-dd HH:mm:ss'
          ></el-date-picker>
        </el-form-item>
        <el-form-item label='配送地址' prop='address'>
          <el-input
            type='text'
            placeholder='请输入地址'
            v-model='formData.address'
          ></el-input>
        </el-form-item>
        <el-form-item label='联系电话' prop='phone'>
          <el-input
            type='text'
            placeholder='请输入电话'
            v-model='formData.phone'
          ></el-input>
        </el-form-item>
        <el-form-item label='配送员' prop='name'>
          <el-input
            type='text'
            placeholder='请输入姓名'
            v-model='formData.name'
          ></el-input>
        </el-form-item>
        <el-form-item label='状态' prop='status'>
          <el-select v-model='formData.status' placeholde='请选择状态'>
            <el-option
              v-for='item in options'
              :label='item.label'
              :value='item.value'
              :key='item.value'
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type='primary' @click="changeTab('diaForm', editType)"
          >确认
          </el-button
          >
          <el-button @click='diaIsShow = false'>取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import { getPageTab2 } from '@/api/table'

export default {
  data() {
    return {
      tableWidth: 165,
      tableData: [],
      allList: [],
      schArr: [],
      sch_order: '',
      sch_status: null,
      sch_date: null,
      currentPage: 1,
      pageSize: 10,
      total: 0,
      pageSizes: [10, 20, 30, 40],
      diaIsShow: false,
      formData: {},
      form: {
        orderSn: '',
        createTime: ''
      },
      editType: '',
      options: [
        { label: '待审核', value: 1 },
        { label: '配送中', value: 2 },
        { label: '已完成', value: 0 },
        { label: '已取消', value: 3 }
      ],
      rowIndex: 0,
      rules: {
        // order: [{ required: true, message: '请输入订单号', trigger: 'blur' }],
        time: [
          {
            // type: 'datetime',
            required: true,
            message: '请输入时间',
            trigger: 'change'
          }
        ],
        address: [{ required: true, message: '请输入地址', trigger: 'blur' }],
        phone: [{ required: true, message: '请输入联系方式', trigger: 'blur' }],
        name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
        status: [
          { required: true, message: '请选择订单状态', trigger: 'change' }
        ]
      }
    }
  },
  created() {
    this._getPageTab2(),
      this.list()
  },
  filters: {
    statusText(val) {
      if (val === undefined) return
      if (val === 4) {
        return 'aa'
      } else if (val === 1) {
        return '待审核'
      } else if (val === 2) {
        return '配送中'
      } else {
        return '已取消'
      }
    }, payText(val) {
      if (val === undefined) return
      if (val === 0) {
        return '未支付'
      } else if (val === 1) {
        return '支付宝'
      } else if (val === 2) {
        return '微信'
      } else {
        return '已取消'
      }
    }, delText(val) {
      if (val === undefined) return
      if (val === 0) {
        return '未删除'
      } else {
        return '已删除'
      }
    }, conText(val) {
      if (val === undefined) return
      if (val === 0) {
        return '未确认'
      } else {
        return '已确认'
      }
    },
    tagClass(val) {
      if (val === undefined) return
      if (val === 0) {
        return 'success'
      } else if (val === 1) {
        return 'info'
      } else if (val === 2) {
        return 'warning'
      } else {
        return 'danger'
      }
    }
  },
  methods: {
    handleSize(val) {
      this.pageSize = val
      this.getPageData()
    },

    handlePage(val) {
      this.currentPage = val
      this.getPageData()
    },
    _getPageTab2() {
      getPageTab2()
        .then(res => {
          this.allList = res.data.tableList
          this.schArr = this.allList
          this.getPageData()
          this.total = res.data.total
        })
        .catch(error => {
          this.$message.error(error.message)
        })
    },
    getPageData() {
      let start = this.currentPage
      let end = this.pageSize
      let param = new URLSearchParams()
      param.append('page', start)
      param.append('size', end)
      this.$http.post('/system/oms_order/findPage', param).then(data => {
        this.tableData = data
        console.log(data)
      }).catch(err => {
        console.log(err)
      })
      // this.tableData = this.schArr.slice(start, end)
    },
    list() {
      this.$http.post('/system/oms_order/findPage').then(data => {
        //console.log(data)
        this.tableData = data
      }).catch(error => {
        console.log(error)
      })
    },
    // 查找
    searchTab() {
      let param = new URLSearchParams()
      param.append('orderSn', this.form.orderSn)
      param.append('createTime', this.form.createTime)
      this.$http.post('/system/oms_order/select', param).then(data => {
        this.tableData = data
      }).catch(err => {
        console.log(err)
      })
    },
    // 审核
    toConfirm(row) {
      row.status = 2
      this.$notify({
        title: '成功',
        message: '审核提交成功',
        type: 'success'
      })
    },
    // 完成
    toSuccess(row) {
      row.status = 0
      this.$notify({
        title: '成功',
        message: '该订单已完成配送',
        type: 'success'
      })
    },
    // 取消
    toDelete(row) {
      row.status = 3
      this.$notify({
        title: '成功',
        message: '已取消该订单',
        type: 'success'
      })
    },
    // 编辑
    editTable(index, row) {
      this.formData = Object.assign({}, row)
      this.editType = 'update'
      this.diaIsShow = true
      this.$nextTick(() => {
        this.$refs.diaForm.clearValidate()
      })
      this.rowIndex = index
    },
    changeTab(form, type) {
      this.$refs[form].validate(valid => {
        if (valid) {
          if (type === 'update') {
            // 改变整个表格数据
            let start = (this.currentPage - 1) * this.pageSize
            this.allList[start + this.rowIndex] = Object.assign(
              {},
              this.formData
            )
            // 解决数组不能通过索引响应数据变化
            this.$set(
              this.tableData,
              this.rowIndex,
              Object.assign({}, this.formData)
            )
            this.$notify({
              title: '成功',
              message: '订单已修改成功',
              type: 'success'
            })
          } else {
            this.tableData.unshift(Object.assign({}, this.formData))
            this.allList.push(Object.assign({}, this.formData))
          }
          this.diaIsShow = false
        } else {
          return
        }
      })
    }
  }
}
</script>
<style lang='scss' scoped>
.fyDiv {
  float: right;
  margin-top: 30px;
  padding-bottom: 20px;
}

.anoCard .el-table .el-button {
  padding: 8px 18px;
  font-size: 12px;
}

.searchDiv {
  margin-bottom: 20px;

  .el-button {
    padding: 11px 20px;
  }
}

.width1 {
  width: 180px;
  margin-right: 10px;
}

.diaForm {
  .el-input {
    width: 350px;
  }
}
</style>
<style lang='scss'>
.anoCard {
  .el-card__body:after {
    content: '';
    clear: both;
    width: 0;
    height: 0;
    visibility: hidden;
    display: block;
  }
}

.diaForm .el-form-item__label {
  padding-right: 20px;
}

.searchDiv [class^='el-icon'] {
  color: #fff;
}
</style>
